
<script type="text/html" template>
  <link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all">
</script>

<div class="login-container">
  <div class="left-container" id="leftContainer">
    <img src="/images/login/agent-login-img.svg" alt="" />
  </div>
  <div class="logo-pallet">
    <div class="logo-img-box" id="siteLogo"></div>
  </div>
  <div class="right-container">
    <div class="top-nav">
      <a class="top-nav-link" href="" id="mchSiteUrl">
        <div class="web-link">官网首页</div>
        <img src="/images/login/arrow1CB7A2.svg" alt="" class="link-arrow" />
      </a>
    </div>
    <div class="input-pallet-box">
      <div class="input-title-box">
        <div class="title-icon-box">
          <img src="/images/login/agent-login-icon.svg" alt="" />
        </div>
        <div class="title-text-box">
          <div class="title-text-cn">代理商系统登录</div>
          <div class="title-text-en">Login to the agent system</div>
        </div>
      </div>

      <form class="layui-form" style="max-width: 100%;">
        <input name="vercodeRandomStr" id="vercodeRandomStr" type='hidden'>
        <div class="input-box">
          <div class="input-tips">用户名</div>
          <div class="input-con-box">
            <img src="/images/login/user-icon.svg" alt="" class="input-icon" />
            <input type="text" name="username" lay-verify="required" class="input-pallet" />
          </div>
        </div>

        <div class="input-box">
          <div class="input-tips">密码</div>
          <div class="input-con-box">
            <img
                    src="/images/login/password-icon.svg"
                    alt=""
                    class="input-icon"
            />
            <input type="password" name="password" lay-verify="required" class="input-pallet" />
          </div>
        </div>

        <div class="input-box">
          <div class="input-tips">图形验证码</div>
          <div class="input-con-box captcha-box">
            <img
                    src="/images/login/captcha-icon.svg"
                    alt=""
                    class="input-icon"
            />
            <input type="text" name="vercode" lay-verify="required" class="input-pallet captcha-input" />
            <div class="captcha-img">
              <img src="" id="LAY-user-get-vercode" alt="" />
            </div>
          </div>
        </div>

        <div class="input-box">
          <div class="input-tips">谷歌验证码（若没有可以不填）</div>
          <div class="input-con-box">
            <img src="/images/login/google-icon.svg" alt="" class="input-icon" />
            <input type="text" name="googleCode" class="input-pallet" />
          </div>
        </div>

        <div class="input-box button-box">
          <div class="login-button" id="loginBtn" lay-submit lay-filter="LAY-user-login-submit" onclick="return false;">
            <div class="login-but-text">登录</div>
            <div class="login-but-img">
              <img src="/images/login/arrowFFF.svg" alt="" />
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
layui.use(['admin', 'form', 'user'], function(){
  var $ = layui.$
  ,setter = layui.setter
  ,admin = layui.admin
  ,form = layui.form
  ,router = layui.router()
  ,search = router.search
  ,layer = layui.layer;

  var loadIndex = layer.load(1);

  //变更网站标题
  $.ajax({
    async: false, type: 'get',
    url: layui.setter.baseUrl + '/auth/siteTitle',
    success: function(res){
      $("#mchSiteUrl").attr("href", res.data.mchSiteUrl);
      $("#siteLogo").append('<img src="'+res.data.siteLogo+'" style="height: 30px;" alt="'+res.data.siteTitle+'">');
    }
  });

  //变更网站标题
  $('.siteTitle').text(layui.data(layui.setter.tableName).siteTitle);

  $('.input-pallet').bind('keyup', function(event) {
    if (event.keyCode == "13") { //keyCode=13是回车键
      $("#loginBtn").trigger("click");
    }
  });


  form.render();

  $.loginOk = function(res) {
    //请求成功后，写入 access_token
    layui.data(setter.tableName, {
      key: setter.request.tokenName
      ,value: res.data.access_token
    });

    //登入成功的提示与跳转
    layer.msg('登入成功', {
      offset: '15px'
      ,icon: 1
      ,time: 1000
    }, function(){
      location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
    });
  };

  //提交
  form.on('submit(LAY-user-login-submit)', function(obj){

    //请求登入接口
    admin.req({
      url: layui.setter.baseUrl + '/auth' //实际使用请改成服务端真实接口
      ,data: obj.field
      ,done: function(res){
        $.loginOk(res);
      }
    });
  });

  $.randomString = function (len) {
      len = len || 32;
      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = '';
      for (i = 0; i < len; i++) {
          pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
  };

  $('body').off('click', "#LAY-user-get-vercode").on('click', "#LAY-user-get-vercode", function(){
      var vercodeRandomStr = $.randomString(6) + new Date().getTime();
      $("#vercodeRandomStr").val(vercodeRandomStr);
      $("#LAY-user-get-vercode").attr('src', layui.setter.baseUrl + '/auth/vercode?vercodeRandomStr=' + vercodeRandomStr);
  });

  $("#LAY-user-get-vercode").click();

  //监听加载状态改变
  $(document).ready(function(){
    layer.close(loadIndex);
    $(".login-container").removeClass("layui-hide");
  });

});
</script>
